<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>hello world</title>
	<link rel="stylesheet" type="text/css" href="src/font-awesome/css/font-awesome.min.css">
	
	<link rel="stylesheet" type="text/css" href="src/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="src/monokai-sublime.css">
	<link rel="stylesheet" type="text/css" href="src/ethan.css">
	<script type="text/javascript" src="src/jquery.min.js"></script>
	<script type="text/javascript" src="src/highlight-js-html-json.js"></script>
	<script type="text/javascript" src="src/ethan.js"></script>
	<script >hljs.initHighlightingOnLoad();</script>  
</head>
<body>
<div class="container">
	<h1 class="text-center">
		Welcome to Ethan.js
	</h1><hr>
	<h2 class="text-center">Introduction</h2>
	<p class="text-center" style="font-size:16px">based on jquery.js , bootstrap.css , fa-icon</p>
	<p class="text-center">version = 0.0.0</p>
	<p class="text-center">
		<button class="btn btn-primary" onclick="download()">Download</button>
	</p>
	<h1>Quick Start</h1>
	<pre><textarea readonly style="width: 100%;background: none;overflow-y: auto;resize: none;border:0;outline: 0;" rows="5">
<link rel="stylesheet" href="font-awesome.css">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="ethan.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ethan.js"></script></textarea></pre>
	<hr>
	<div class="row">
		<div class="col-md-6 text-center">
			<h1 style="text-indent: 2rem;">alert</h1>
			<button class="btn btn-default btn-danger" id="show-alert-danger">danger</button>
			<button class="btn btn-default btn-warning" id="show-alert-warning">warning</button>
			<button class="btn btn-default btn-success" id="show-alert-success">success</button>
			<button class="btn btn-default btn-info" id="show-alert-info">info</button>
			<button class="btn btn-default btn-primary" id="toFFF">primary</button>
			<button class="btn btn-default btn-default" id="show-alert-default">default</button>
			<br>
		</div>
		<div class="col-md-6">
			<pre><code class="javascript">ethaner.$alert({
	title:"Notice",
	msg:"确定要把背景颜色变红吗？",
	type:"danger",
	confirm:function() {
		$('body').css({"background":"red"});
	}
});</code></pre>
		</div>
	</div>
	<hr>
	<div class="row">
		<div class="col-md-6 text-center">
			<h1 style="text-indent: 2rem;">message</h1>
			<button class="btn btn-default btn-danger" onclick="showMsg('danger')">danger</button>
			<button class="btn btn-default btn-warning" onclick="showMsg('warning')">warning</button>
			<button class="btn btn-default btn-success" onclick="showMsg('success')">success</button>
			<button class="btn btn-default btn-info" onclick="showMsg('info')">info</button>
			<button class="btn btn-default btn-primary" onclick="showMsg('primary')">primary</button>
			<button class="btn btn-default btn-default" onclick="showMsg_default()">default</button>
		</div>
		<div class="col-md-6">
			<pre><code class="javascript">ethaner.$msg({
	msg:"Hello World",
	time:1500,
	top:"15vh",
	icon:"fa fa-user",
	type:"success"
});</code></pre>
		</div>
	</div>
	<hr>
</div>
</body>
<script type="text/javascript">
$("#show-alert-danger").on("click",function() {
	ethaner.$alert({
		title:"Notice",
		msg:"确定要把背景颜色变红吗？",
		type:"danger",
		confirm:function() {
			$('body').css({"background":"#fef0f0"});
		}
	});
});
$("#show-alert-warning").on("click",function() {
	ethaner.$alert({
		title:"Notice",
		msg:"确定要把背景颜色变黄吗？",
		type:"warning",
		confirm:function() {
			$('body').css({"background":"#fdf6ec"});
		}
	});
});
$("#show-alert-success").on("click",function() {
	ethaner.$alert({
		title:"Notice",
		msg:"确定要把背景颜色变绿吗？",
		type:"success",
		confirm:function() {
			$('body').css({"background":"#f0f9eb"});
		}
	});
});
$("#show-alert-info").on("click",function() {
	ethaner.$alert({
		title:"Notice",
		msg:"确定要把背景颜色变灰吗？",
		type:"info",
		confirm:function() {
			$('body').css({"background":"#f4f4f5"});
		}
	});
});
$("#toFFF").on("click",function() {
	ethaner.$alert({
		title:"提示",
		msg:"确定要把背景颜色变白吗？",
		confirm:function() {
			$('body').css({"background":"#FFF"});
		}
	});
});
$("#show-alert-default").on("click",function() {
	ethaner.$alert(1);
});

function showMsg(type) {
	ethaner.$msg({
		msg:"Hello World",
		time:1500,
		top:"15vh",
		icon:"fa fa-user",
		type:type
	});
}
function showMsg_default() {
	ethaner.$msg(1);
}
function download() {
	window.open("ethan-js.zip");
}
</script>
</html>